<script setup lang="ts">
import type { TableRow } from '@/types'
import { InformationCircleIcon } from '@heroicons/vue/24/solid'

const { data } = defineProps<{ data: TableRow[] }>()
</script>

<template>
  <table class="table w-full">
    <tbody>
      <tr v-for="row in data" :key="row.key">
        <th class="w-1/2">
          {{ row.key }}
          <div v-if="row.keyTooltip" class="tooltip tooltip-right ml-2 inline-block" :data-tip="row.keyTooltip">
            <InformationCircleIcon class="inline size-5" />
          </div>
        </th>
        <td class="w-1/2">
          <a v-if="row.link" :href="row.link" class="link link-primary link-hover" target="_blank">{{ row.value }}</a>
          <span v-else-if="row.html" v-html="row.value"></span>
          <template v-else>
            <template v-if="typeof row.value === 'boolean'">
              {{ row.value ? 'Yes' : 'No' }}
            </template>
            <template v-else>
              {{ row.value ?? 'N/A' }}
            </template>
          </template>
          <div v-if="row.valueTooltip" class="tooltip tooltip-left ml-2 inline-block" :data-tip="row.valueTooltip">
            <InformationCircleIcon class="inline size-5" />
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>
